import React from 'react';
import '../../styles/components/Header.css';
import {Row, Col, Menu} from 'antd';
import {HomeOutlined,FileTextOutlined,VideoCameraOutlined,CustomerServiceOutlined} from '@ant-design/icons';

const Header = () => (
    <div className='header'>
        <Row justify='conter'>
            <Col xs={24} sm={24} md={10} lg={15} xl={12} >
                <span className='header-logo'>乱语</span>
                <span className='header-txt'>记录技术成长</span>
            </Col>

            <Col className='menu-div' xs={0} sm={0} md={14} lg={8} xl={6} >
                <Menu mode='horizontal' >
                    <Menu.Item key='home'><span><HomeOutlined /></span>首页 </Menu.Item>
                    <Menu.Item key='article'><span><FileTextOutlined /></span>文章 </Menu.Item>
                    <Menu.Item key='video'><span><VideoCameraOutlined /></span>视频 </Menu.Item>
                    <Menu.Item key='music'><span><CustomerServiceOutlined /></span>音乐 </Menu.Item>
                </Menu>
            </Col>
        </Row>
    </div>
)

export default Header;